<template>
  <div class="online-secondary">
    <BackPreviou class="back-btn" @showMain="handelClick" />
    <div class="content">
      <Form
        :model="formState"
        name="basic"
        style="width: 1010px"
        :label-col="{ style: { width: '210px' } }"
        :wrapper-col="{ span: 16 }"
        autocomplete="off"
        label-align="right"
        :colon="false"
      >
        <div v-if="secondaryName === 'OnlyOffice'" class="only-office">
          <FormItem
            name="DOCUMENT_ONLY_HOST"
            class="DOCUMENT_ONLY_HOST"
            :label="$t('document.secondary.address')"
          >
            <Input v-model:value="formState.DOCUMENT_ONLY_HOST" class="myInput"> </Input>
            <div class="text">
              <i>{{ $t('document.secondary.addressTip') }}</i>
            </div>
          </FormItem>
          <FormItem
            name="DOCUMENT_ONLY_CALLHOST"
            class="DOCUMENT_ONLY_CALLHOST"
            :label="$t('document.secondary.callback')"
          >
            <Input v-model:value="formState.DOCUMENT_ONLY_CALLHOST" class="myInput"> </Input>
            <div class="text">
              <i>{{ $t('document.secondary.callbackTip') }}</i>
            </div>
          </FormItem>
        </div>
        <div v-else class="wps">
          <FormItem
            name="DOCUMENT_WPS_READHOST"
            class="DOCUMENT_WPS_READHOST"
            :label="$t('document.secondary.preview')"
          >
            <Input v-model:value="formState.DOCUMENT_WPS_READHOST" class="myInput"> </Input>
            <div class="text">
              <i>{{ $t('document.secondary.previewTip') }}</i>
            </div>
          </FormItem>
          <FormItem
            name="DOCUMENT_WPS_EDITHOST"
            class="DOCUMENT_WPS_EDITHOST"
            :label="$t('document.secondary.edit')"
          >
            <Input v-model:value="formState.DOCUMENT_WPS_EDITHOST" class="myInput"> </Input>
            <div class="text">
              <i>{{ $t('document.secondary.editTip') }}</i>
            </div>
          </FormItem>
          <FormItem
            name="DOCUMENT_WPS_APPSECRET"
            class="DOCUMENT_WPS_APPSECRET"
            :label="$t('document.secondary.id')"
          >
            <Input v-model:value="formState.DOCUMENT_WPS_APPSECRET" class="myInput"> </Input>
            <div class="text">
              <i>{{ $t('document.secondary.idTip') }}</i>
            </div>
          </FormItem>
          <FormItem
            name="DOCUMENT_WPS_APPID"
            class="DOCUMENT_WPS_APPID"
            :label="$t('document.secondary.key')"
          >
            <Input v-model:value="formState.DOCUMENT_WPS_APPID" class="myInput"> </Input>
            <div class="text">
              <i>{{ $t('document.secondary.keyTip') }}</i>
            </div>
          </FormItem>
          <FormItem
            name="DOCUMENT_WPS_CALLHOST"
            class="DOCUMENT_WPS_CALLHOST"
            :label="$t('document.secondary.callback')"
          >
            <Input v-model:value="formState.DOCUMENT_WPS_CALLHOST" class="myInput"> </Input>
            <div class="text">
              <i>{{ $t('document.secondary.callbackTip') }}</i>
            </div>
          </FormItem>
        </div>
      </Form>
    </div>
  </div>
</template>

<script>
  import BackPreviou from '@/components/back-previou.vue';
  import { Input, Form, Modal } from '@jecloud/ui';
  import { onUnmounted, reactive } from 'vue';
  import VueEvent from '@/helper/model/event';
  import { useOpenDialog } from '@/hooks';
  import { saveConfigData } from '@/api';
  import { onScroll } from '@/utils/utils';
  export default {
    name: 'OnlineSecondary',
    components: {
      Form,
      FormItem: Form.Item,
      Input,
      BackPreviou,
    },
    props: {
      secondaryName: {
        type: String,
        default: '',
      },
      dataAll: {
        type: Array,
        default: () => [],
      },
    },
    emits: ['showMain'],
    setup(props, { emit }) {
      // code：用于相应网络请求
      const codeConfig = {
        OnlyOffice: 'document-onlyoffice',
        WPS: 'document-wps',
      };

      // 关闭子页面
      const closePage = () => {
        emit('showMain', false);
      };

      // 点击返回的回调
      const handelClick = () => {
        VueEvent.emit('saveResult', isChange());
        if (isChange()) return closePage();
        useOpenDialog({
          attribute: codeConfig[props.secondaryName],
          allFields: JSON.stringify(formState),
        });
      };

      // 表单数据
      let formState = reactive({
        DOCUMENT_ONLY_HOST: '',
        DOCUMENT_ONLY_CALLHOST: '',
        DOCUMENT_WPS_READHOST: '',
        DOCUMENT_WPS_EDITHOST: '',
        DOCUMENT_WPS_APPSECRET: '',
        DOCUMENT_WPS_APPID: '',
        DOCUMENT_WPS_CALLHOST: '',
      });

      //对比项
      let meta = {};
      let res = {};
      // 获取并转换数据
      const changeDataType = () => {
        res = props.dataAll.filter((item) => {
          return item.key === 'OnlyOffice' || item.key === 'WPS';
        });
        res.find((td) => {
          td.items.find((item) => {
            formState[item.code] = item.value;
          });
        });
        meta = JSON.parse(JSON.stringify(formState));
      };
      changeDataType('props', props.dataAll);

      // 表单数据是否改变
      const isChange = () => {
        return Object.keys(meta).every((item) => {
          return meta[item] === formState[item];
        });
      };

      // 点击保存的回调
      const clickCallback = () => {
        if (!isChange()) {
          saveConfigData({
            attribute: codeConfig[props.secondaryName],
            allFields: JSON.stringify(formState),
            type: '',
          }).then(
            (meta = JSON.parse(JSON.stringify(formState))),
            Modal.notice('保存成功', 'success'),
            VueEvent.emit('changeAllData', {
              item: codeConfig[props.secondaryName],
              formState,
            }),
          );
        } else {
          Modal.notice('无数据操作!', 'info');
        }
      };

      // 回到顶部
      const onScrollDe = () => {
        setTimeout(() => {
          onScroll();
        }, 0);
      };
      VueEvent.on('closeEvent', closePage);
      VueEvent.on('toolbarSaveEvent', clickCallback);
      VueEvent.on('fadeScrollSed', onScrollDe);
      VueEvent.on('isSave', handelClick);
      onUnmounted(() => {
        VueEvent.off('closeEvent', closePage);
        VueEvent.off('fadeScrollSed', onScrollDe);
        VueEvent.off('isSave', handelClick);
        VueEvent.off('toolbarSaveEvent', clickCallback);
      });

      return { handelClick, formState };
    },
  };
</script>

<style lang="less" scoped>
  .online-secondary {
    margin-left: -100px;
    .content {
      padding-top: 20px;
    }
  }
</style>
